<!--
 * @Author: wfl
 * @LastEditors: root zhangpengpeng@ikingtech.com
 * @description:
 * @updateInfo:
 * @Date: 2022-05-05 16:49:41
 * @LastEditTime: 2024-03-20 18:58:10
-->
<script setup lang="ts">
import { ref } from 'vue'
import * as api from '@/api/filter'
import { useFilterStore } from '@/store/filter'
import DataHeader from './components/data-header.vue'
import { useMessage , NPagination, useDialog } from 'naive-ui'
import { IconDelete, IconEdit } from '@/icons'
import { _ } from 'iking-utils'
import { useUserStore } from '@/store/user'
const dialog = useDialog()
const userStore = useUserStore()
const nMessage = useMessage()
const initObj = {
  id:'',
  name: '',
  origin: 'return data',
  code: '',
}
const filterData = reactive({
  // 列表数据
  list:[],
  // 分页
  page:{
    page:1,
    total:0,
    size: 20,
  },
  // 获取列表数据
  getData:async ()=>{
    const res = await api.filterPage({
      projectId: userStore.user.departmentId,
      page: filterData.page.page,
      rows: filterData.page.size,
    })
    if (res.success) {
      filterData.list = res?.data ?? []
    }
  },
  // 分页发生变化
  pageChange:(value:number)=>{
    filterData.page.page = value
    filterData.getData()
  },
  // 分页数发生变化
  sizeChange:(value:number)=>{
    filterData.page.size = value
    filterData.getData()
  },
})
filterData.getData()


// 删除
const handDelete = async mo => {
  dialog.warning({
    title: '警告',
    content: '你确定删除该过滤器吗？, 请确认已使用的组件不会受到影响',
    positiveText: '确定',
    negativeText: '取消',
    showIcon: false,
    onPositiveClick: async () => {
      const res = await api.deleteFilter(mo.id)
      if (res.success) {
        filterData.getData()
      }
    },
  })

}

const loading = ref(false)
const showModal = ref(false)
const filterForm = ref(_.cloneDeep(initObj))
const showFilterModal = () => {
  filterForm.value.id = null
  showModal.value = true
}
const handCancle = () => {
  showModal.value = false
  filterForm.value = _.cloneDeep(initObj)
}
const changeNewCode = code => {
  filterForm.value.origin = code.value
}
const handConfime = async () => {
  loading.value = true
  let res:any
  if(filterForm.value.id){
    res = await api.updateFilter(filterForm.value)
  }else{
    const params =filterForm.value
    delete params.id
    res = await api.createFilter(params)
  }
  if (res.success) {
    loading.value = false
    filterData.getData()
    handCancle()
  } else {
    nMessage.error(res.msg)
  }
}
const handUpdate = (mo: any) => {
  filterForm.value = _.cloneDeep(mo)
  showModal.value = true
}
</script>

<template>
  <div class="data-filter">
    <DataHeader
      label="新增的过滤器在当前登录用户所有大屏均可使用"
      tip="[修改或删除过滤器时，请确认已使用的组件不会受到影响]"
      @hand-click="showFilterModal"
    />
    <div class="filter-box">
      <div class="filter-card">
        <div v-for="mo in filterData.list" :key="mo.id" style="position: relative;">
          <p class="filter-name">
            <!-- <n-input v-model:value="mo.name" placeholder="输入名称" @blur="handUpdate(mo)" /> -->
            {{ mo.name }}
          </p>
          {{ mo.readonly }}
          <p title="function filter(data) {" class="fake-code --start">
            <span class="--keyword">function</span> filter(data) {
          </p>
          <div class="monaco-box"></div>
          <g-monaco-editor
            language="javascript"
            :auto-format="true"
            :read-only="true"
            :code="mo.origin"
            :height="232"
          />
          <div class="fake-code --end">
            }
            <div>
              <!-- <n-popconfirm
                @positive-click="handDelete(mo)"
              >
                <template #trigger>
                  <n-icon>
                    <IconDelete />
                  </n-icon>
                </template>
                确认删除过滤器 [{{ mo.name }}] 吗?
              </n-popconfirm>

              <n-icon @click="mo.readonly = false">
                <IconEdit />
              </n-icon>
              <n-icon @click="handUpdate(mo)">
                <IconBox />
              </n-icon> -->
              <n-icon title="删除" @click="handDelete(mo)">
                <IconDelete />
              </n-icon>
              <n-icon title="修改" @click="handUpdate(mo)">
                <IconEdit />
              </n-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page-list">
      <n-pagination
        v-model:page="filterData.page.page"
        :item-count="filterData.page.total"
        :page-size="filterData.page.size"
        size="medium"
        show-quick-jumper
        show-size-picker
        :page-sizes="[20, 30, 40, 50, 60]"
        @update:page="filterData.pageChange"
        @update:page-size="filterData.sizeChange"
      />
    </div>
  </div>

  <n-modal
    v-model:show="showModal"
    :mask-closable="false"
    preset="dialog"
    :show-icon="false"
    title="Dialog"
  >
    <template #header>
      <div>{{ filterForm.id?'修改':'新增' }}过滤器</div>
    </template>
    <div>
      <n-form
        ref="formRef"
        :label-width="80"
        label-placement="top"
        :model="filterForm"
        size="small"
      >
        <n-form-item label="名称" path="name">
          <n-input v-model:value="filterForm.name" placeholder="输入配置名称" />
        </n-form-item>
        <!-- <n-form-item label="项目" path="project_id">
          <n-tree-select
            :options="treeSelectData.options"
            default-value=""
            @update:value="treeSelectData.update"
          />
        </n-form-item> -->
        <n-form-item label="过滤代码" path="origin">
          <div style="width: 100%;">
            <p title="function filter(data) {" class="fake-code --start">
              <span class="--keyword">function</span> filter(data) {
            </p>
            <g-monaco-editor
              language="javascript"
              :auto-format="true"
              :code="filterForm.origin"
              @blur="changeNewCode"
            />
            <div class="fake-code --end">}</div>
          </div>
        </n-form-item>
      </n-form>
    </div>
    <template #action>
      <n-button :disabled="loading" @click="handCancle">取消</n-button>
      <n-button type="primary" :disabled="loading" @click="handConfime"> 确定 </n-button>
    </template>
  </n-modal>
</template>

<style lang="scss" scoped>
::v-deep(.n-form-item-blank .datav-editor) {
  width: 100%;
}

.data-filter {
  flex: 1;
  padding: 20px 28px 0;
  width: 100%;

  ::v-deep(.datav-editor.--read-only .margin) {
    background-color: #0e1013;
  }

  .filter-box{
    height: calc(100vh - 180px);
    overflow-y: auto;
  }
  .filter-card {
    margin-top: 8px;
    display: grid;
    grid-gap: 18px;
    grid-template-columns: repeat(auto-fill, 350px);
    & > div {
      border-radius: 8px;
      box-shadow: 0 0 11px 2px #00000063;
      margin: 8px;
    }

    .filter-name {
      color: #ccc;
      background: #17191c;
      padding: 8px;
      font-size: 14px;
      border-bottom: 1px solid #202020;
    }
  }
}

.fake-code {
  font-family: Menlo-Regular, monospace;
  color: #ccc;
  padding-left: 8px;
  height: 28px;
  line-height: 28px;
  background: var(--datav-data-form-bgcolor);
  margin-bottom: 0;

  &.--end {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 56px;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    i{
      display: inline-block;
      width: 20px;
    }
  }

  .--keyword {
    color: #569cd6;
  }

  i {
    cursor: pointer;
    padding: 0 5px;
    font-size: 16px;
    transition: all 0.25s linear;
  }

  .jh-shanchu:hover {
    color: #f00;
  }

  .jh-undo:hover,
  .jh-baocun:hover {
    color: #008cff;
  }
}
.monaco-box{
  width: 100%;
  position: absolute;
  top: 50px;
  left: 0;
  bottom: 28px;
  z-index: 10;
  opacity: 0;
}
.page-list{
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
</style>
